import { ref } from "vue";
import type { Ref } from "vue";
import { useRouter } from "vue-router";
import { getProList } from "@/api/api";

export const useGoodList = () => {
    const proList: Ref<any[]> = ref([]);
    const proCount: Ref<number> = ref(1);
    const loading: Ref<boolean> = ref(false);
    const finished: Ref<boolean> = ref(false);
    const refreshing: Ref<boolean> = ref(false);
    const router = useRouter();

    const onLoad = async () => {
        // 1. 一进入页面，这个onload方法就会马上触发一次，目的是请求一次数据让界面上有数据能展示
        // 2.在数据请求完毕之后，需要把loading改成false，目的是告诉组件这一次的请求结束了
        // 3.当数据请求回来是空的时候，说明所有的数据都被请求完毕了，那么就要根据组件的API规则，把finished变成true，目的是终止组件的继续请求
        const res = (await getProList({
            count: proCount.value,
            limitNum: 10,
        })) 
        console.log(res);

        if (res.data.code === "200") {
            refreshing.value = false;
            // 假设新请求得来的数据是空，说明所有的数据都被请求完了，这个时候把finished变为true，告诉组件数据已经请求完毕了
            if (res.data.data.length === 0) {
                finished.value = true;
                return false;
            }
            // 新请求的数据和老数据拼接起来
            proList.value = proList.value.concat(res.data.data);
            // 页码加一
            proCount.value++;
            // 告诉组件这一次的请求结束了
            loading.value = false;
        }
    };

    const onRefresh = () => {
        // 清空列表数据
        proList.value = [];
        proCount.value = 1;
        finished.value = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        loading.value = true;
        onLoad();
    };

    const goToDetail = (id: string) => {
        router.push({
            path: "/detail",
            query: {
                id,
            },
        });
    };

    return {
        proList,
        loading,
        finished,
        refreshing,
        onLoad,
        onRefresh,
        goToDetail,
    };
};